<script setup>
import {ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {Dialog, showConfirmDialog} from 'vant';
import "vant/es/dialog/style";
import goodsItem from "@/components/home/goodsItem.vue"
import api from "@/api/api"

// 响应式数据
const keyword = ref("")
const searchList = ref([
  "发动机舱清洗",
  "前挡玻璃去油膜",
  "轮毂清洗",
  "四轮定位C级以上中大型轿车和SUV",
])
const searchHistory = ref([])
const searchFlag = ref(false)
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const pageInfo = ref({
  pageNum: 1,
  pageSize: 15,
})

// 路由
const route = useRoute()
const router = useRouter()

// 监听器
watch(keyword, (newVal, oldVal) => {
  if (newVal.trim().length == 0) {
    searchFlag.value = false
  }
})

// 方法定义
const onClickLeft = () => {
  router.back()
}

const onSearch = async () => {
  list.value = []
  finished.value = false
  pageInfo.value.pageNum = 1
  searchFlag.value = true
  loading.value = true
  await onLoad()
}

const onLoad = async () => {
  if (finished.value) return
  let res = await api.common.search({
    keyWords: keyword.value,
    ...pageInfo.value,
  })
  loading.value = false
  list.value = [...list.value, ...res.data].filter(
      (v) => v.id != "1952191044194463746"
  )
  loading.value = false
  if (res.data.length < pageInfo.value.pageSize) {
    finished.value = true
  } else {
    pageInfo.value.pageNum++
  }
  await getSearchHistory()
}

const historySearch = (history) => {
  keyword.value = history
  onSearch()
}

const clear = () => {
  searchFlag.value = false
  list.value = []
  finished.value = false
  pageInfo.value.pageNum = 1
}

const getSearchHistory = async () => {
  searchHistory.value = await api.common.searchhistory()
}

const delAllHistory = async () => {
  showConfirmDialog({
    title: '确认',
    message: '是否清空搜索记录？',
    className: 'dialog',
  })
      .then(async () => {
        await api.common.delAllSearchHistory()
        await getSearchHistory()
      })
      .catch(() => {
      });
}

const goDetail = (v) => {
  let type = -1
  if (v.categoryId == "1923197645038747649") {
    //洗车
    type = 0
  } else if (v.categoryId == "1923192237742030850") {
    //保养
    type = 2
  } else if (v.categoryId == "1923196720186327042") {
    //轮胎
    type = 1
  }
  router.push({
    path: "/serveDetail",
    query: {
      type,
      goodsId: v.id,
    },
  })
}

const buyNow = async (item) => {
  goDetail(item)
}

// 生命周期钩子
getSearchHistory()
</script>
<template>
  <div class="search_warpper">
    <div class="search">
      <van-search
          v-model="keyword"
          show-action
          placeholder="试试搜索商品、服务或门店吧"
          @clear="clear"
      >
        <template #action>
          <div @click="onSearch" class="search_btn">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="main">
      <template v-if="!searchFlag">
        <div class="text_1 flex">
          <span>历史搜索</span>
          <van-icon name="delete-o" @click="delAllHistory"/>
        </div>
        <div class="address">
          <van-tag
              v-for="(v, i) in searchHistory"
              :key="i"
              @click="historySearch(v)"
          >{{ v }}
          </van-tag
          >
        </div>
      </template>
      <template v-else>
        <div class="list">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              :finished-text="list.length > 0 ? '没有更多了' : ''"
              :immediate-check="false"
              @load="onLoad"
          >
            <goodsItem
                v-for="(v, i) in list"
                :type="1"
                :key="JSON.stringify(v) + i"
                :item="v"
                @buy="buyNow"
                @click="goDetail(v)"
            >
            </goodsItem>
          </van-list>
          <van-empty
              v-if="!loading && list.length == 0"
              image="search"
              description="暂无数据"
          />
        </div>
      </template>
    </div>
  </div>
</template>


<style lang="less" scoped>
.search_warpper {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding: 50px 0;
  box-sizing: border-box;

  .search {
    margin-top: 60px;
    margin: 60px 50px;
    background: #fff;

    :deep(.van-field__left-icon .van-icon) {
      font-size: 50px;
    }

    .search_btn {
      padding: 0 40px;
      color: #fff;
      background: #169dff;
      border-radius: 10px;
      height: 100px;
      line-height: 100px;
      font-size: 50px;
    }

    :deep(.van-search__field) {
      height: 100px;
    }

    :deep(.van-search__content) {
      background: #fff;
    }

    :deep(.van-cell__value) {
      font-size: 44px;
    }
  }

  .main {
    height: calc(100vh - 350px);
    background: #fff;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    padding: 50px 45px;

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .text_1 {
      font-size: 60px;
    }

    .address {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 20px;

      :deep(.van-tag) {
        padding: 20px 20px;
        color: #333;
        background: #f8f8f8;
        font-size: 44px;
        margin-bottom: 40px;
        margin-right: 40px;
      }
    }
  }

}

.list {
  :deep(.van-list__loading) {
    font-size: 44px;
  }

  :deep(.van-list__finished-text) {
    margin: 100px 0;
    font-size: 44px;
  }
}

:deep(.van-empty__image) {
  width: 600px;
  height: 600px;
}

:deep(.van-empty__description) {
  font-size: 44px;
}

//dialog
:deep(.dialog) {
  width: 750px;
}

</style>
